<template>
	<view>
		<view class="tabbar " :style="'--repeat'+tabbar.length">
			<view class="tabbar-nav">
				<view class="tabbar-nav-a" v-for="(item, index) in tabbar" :key="index"
					:class="pageIndex == index ? 'after' : ''" @tap="tapTabbar(item, index)">
					<view class="after-icon" v-if="pageIndex == index">
						<image :src="item.selectedIconPath" style="width: 60rpx;height: 60rpx;" class="juzhong"></image>

					</view>
					<view v-else>
						<image :src="item.iconPath" style="width: 60rpx;height: 60rpx;" class="juzhong"></image>

					</view>

					<view class="text font-content juzhong">{{ item.text }}</view>
				</view>
			</view>
			<view class="safeZone" :style="{ 'height': safeAreaInsetsBottom }"></view>
		</view>
		<view :style="{ 'height': tabbarHeight }"></view>
	</view>
</template>
<script>
	export default {
		name: "Tabbar",
		props: {
			pageIndex: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				tabbarHeight: '',
				safeAreaInsetsBottom: '',
				tabbar: [{
						"pagePath": "/pages/index",

						"iconPath": "/static/images/tabbar/icon/首页(1).png",
						"selectedIconPath": "/static/images/tabbar/icon/首页.png",
						"text": "首页"
					}, {
						"pagePath": "/pages/reservation/reservation",
						"iconPath": "/static/images/tabbar/icon/预约(1).png",
						"selectedIconPath": "/static/images/tabbar/icon/预约.png",
						"text": "预约"
					}, {
						"pagePath": "/pages/goods/index",
						"iconPath": "/static/images/tabbar/icon/红包和劵(2).png",
						"selectedIconPath": "/static/images/tabbar/icon/红包和劵.png",
						"text": "卡劵套餐"
					},
					{
						"pagePath": "/pages/mine/index",
						"iconPath": "/static/images/tabbar/icon/我的.png",
						"selectedIconPath": "/static/images/tabbar/icon/我的(1).png",
						"text": "我的"
					}
				]
			}
		},
		created() {
			uni.hideTabBar({
				animation: true
			})
			let res = uni.getWindowInfo().safeAreaInsets.bottom
			this.safeAreaInsetsBottom = res * 2 + "rpx";
			this.tabbarHeight = res + 50 * 2 + "rpx"
		},
		methods: {
			tapTabbar(val, index) {
				console.log(val.pagePath);
				uni.navigateTo({
					url: val.pagePath
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	.glass-effect {
		width: 200px;
		height: 200px;
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(10px);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		border-radius: 10px;
	}

	.tabbar {
		--width: 100rpx;
		--height: 120rpx;
		--size: 60rpx;
		--repeat: 4;
		--color: #FC536E;
		--radius: 40rpx;
		--rgba: rgba(255, 255, 255, 0.9);
		position: fixed;
		width: 710rpx;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
		z-index: 998;

		.tabbar-nav {
			display: grid;
			grid-template-columns: repeat(var(--repeat), 1fr);

			.tabbar-nav-a {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				padding: 4rpx 0;
				position: relative;
				height: var(--height);
				background-color: rgba(255, 255, 255, 0.7);
				backdrop-filter: blur(10rpx);
				box-sizing: border-box;
				// filter: drop-shadow(2rpx -2rpx 2rpx rgba(0, 0, 0, 0.1));
				font-size: 24rpx;


				&:nth-child(1) {
					border-top-left-radius: var(--radius);
					border-bottom-left-radius: var(--radius);

				}

				&:nth-last-child(1) {
					border-top-right-radius: var(--radius);
					border-bottom-right-radius: var(--radius);
				}
			}

			.after {

				text {
					color: var(--color);
				}
			}
		}

		.safeZone {
			background-color: var(--rgba);
		}
	}
</style>